<template>
	<view class="pages">
		<text class="titile">待返金额</text> 
		<text class="price" v-if="userInfo.memberStatus==1">{{showPrice}}</text> 
		<text class="price" v-if="userInfo.memberStatus==0">0</text>
		<view class="date" v-if="userInfo.memberStatus==1">
			<text>到期日期 ：</text> 
			<countdown-timer :time="time" autoStart>
				<template v-slot="{day, hour, minute, second, remain, time}">
					<view class="ttimes"><text>{{day}}</text><text>天</text><text>{{hour}}</text><text>时</text><text>{{minute}}</text><text>分</text><text>{{second}}</text><text>秒</text></view>	
				</template>
			</countdown-timer>
		</view> 
		<text class="tips">返还说明：每个月刷满5000额度流水，截止到12个月后待返还</text>
		<view class="bth" @click="toBacks">
			提现
		</view>
	</view>
</template>

<script>
	import countdownTimer from "@/components/countdown-timer/countdown-timer.vue"
	export default {
		components:{countdownTimer},
		data() {
			return {
				time:null,
				userInfo:{},
				showPrice:0.00,
			};
		},
		onLoad() {
			this.getUser()
		},
		methods:{
			async getUser(){
				const {data:res} = await this.$api('/app/getInfo','GET')
				const {data:price} = await this.$api('/app/getAgreement','GET',{code:"member_price"})
				this.showPrice = Number(price.data).toFixed(2)
				if(res.code!=200)return
				this.userInfo = res.data
				const now = new Date();
				let targetDate  = new Date(this.userInfo.expireTime.replace(/—|-/g, "/"));
				this.time  = targetDate.getTime() - now.getTime();
				if(this.time<=0){
					uni.showToast({
						title: '会员到期',
						icon: 'none'
					});
				}
				// console.log(this.time)
			},
			toBacks(){
				if(this.userInfo.memberStatus==0){
					uni.showToast({
						title: '未满足提现要求',
						icon: 'none'
					});
				}else{
					uni.navigateTo({
						url:"/pages/wallet/wallet"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
 .pages{
	 width: 100vw;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 text-align: center;
	 align-items: center;
	 .titile{
		 font-size: 50rpx;
		 margin-bottom: 20rpx;
	 }
	 .price{
		 color: #FF0000;
		 font-size: 50rpx;
		 font-weight: bold;
	 }
	 .date{
		 color: #333;
		 font-size: 28rpx;
		 text-align: left;
		 padding:0 80rpx;
		 margin-top: 30rpx;
		 display: flex;
		 align-items: center;
		 .ttimes{
			 display: flex;
			 gap: 8rpx;
		 }
	 }
	 .tips{
		 color: #888;
		 text-align: left;
		 padding:0 80rpx;
		 margin-top: 30rpx;
	 }
	 .bth{
		width: 240rpx;
		height: 100rpx;
		border-radius: 60rpx;
		background-color: #529AEE;
		color: #fff;
		line-height: 100rpx;
		font-size: 35rpx;
		font-weight: bold;
		margin-top: 80rpx;
	 }
 }
</style>
